<script setup name="music-cell">
import { VideoTwo, MoreOne } from '@icon-park/vue-next'
import { storeToRefs } from 'pinia'
import { usePlayStore } from '@/stores'
import IconPark from '@/components/common/IconPark.vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  offset: {
    type: Number,
    default: 48
  },
  showSticky: {
    type: Boolean,
    default: true
  }
})

const { playIndex, playlist, isPlayer } = storeToRefs(usePlayStore())
const playStore = usePlayStore()

// 播放选择的歌曲
const playSelect = index => {
  // 获取当前选中的歌曲
  const song = props.list[index]
  // 如果歌曲不存在或播放列表不存在或歌曲为VIP，则退出函数
  if (!song || !playStore.playlist || song.vip) return
  // 在播放列表中查找歌曲索引
  const playlistIndex = playStore.findIndexs(song, playStore.playlist)
  // 如果歌曲已经在播放列表中，则设置播放索引为该歌曲的索引
  if (playlistIndex !== -1) {
    playStore.setPlayIndex(playlistIndex)
  } else {
    // 否则，将歌曲添加到播放列表末尾，并设置播放索引为新添加的歌曲索引ƒ
    const newPlayList = playStore.concatPlayList([song], playStore.playlist)
    playStore.setPlaylist(newPlayList)
    playStore.setPlayIndex(newPlayList.length - 1)
  }
}
</script>

<template>
  <van-sticky :offset-top="offset" v-if="showSticky">
    <slot name="radius" />
  </van-sticky>
  <template v-else>
    <slot name="radius" />
  </template>
  <van-cell v-for="(item, index) in list" :key="item.id" :border="false">
    <template #title>
      <van-row gutter="24" class="songinfo" @click="playSelect(index)">
        <van-col class="songinfo-index" span="3">{{ index + 1 }}</van-col>
        <van-col class="songinfo-name"
          :class="{ 'active': playlist && playIndex >= 0 && playIndex < playlist.length && item.id === playlist[playIndex].id && !isPlayer, 'disabled': item.vip }"
          span="21">
          <van-text-ellipsis :content="item.name" rows="1" />
        </van-col>
      </van-row>
    </template>

    <template #label>
      <div class="author" @click="playSelect(index)">
        <span v-for="(item1, i) in item.singer" :key="item1.id">
          {{ item1.name }}
          <span v-if="i !== item.singer.length - 1"> & </span>
        </span>
      </div>
    </template>

    <template #value>
      <RouterLink :to="{ path: '/mvlist/detail', query: { id: item.mvId } }">
        <IconPark :icon="VideoTwo" :size="6" :strokeWidth="3" v-if="item.mvId !== 0" style="padding-right: 8px" />
      </RouterLink>
      <IconPark :icon="MoreOne" :size="6" />
    </template>
  </van-cell>
</template>

<style lang="scss" scoped>
.van-cell {
  background-color: var(--color-background);
  opacity: .9;
  color: var(--reversal-text);

  &::after {
    content: none;
  }

  .songinfo {
    &-index {
      font-size: 16px;
      color: var(--vt-c-info-text);
    }

    &-name {
      padding-left: 0 !important;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: var(--reversal-text);

      .van-text-ellipsis {
        padding-left: 10px;
      }

      &.active {
        color: red;
      }

      &.disabled {
        text-decoration: line-through;
        opacity: 0.5;
        pointer-events: none;
      }
    }
  }

  .author {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 240px;
    padding-left: 40px;
  }
}
</style>